<template>
  <div class="home">
    <div class="header">
      <div class="left">
        <img class="logo" src="./../assets/img/logo.png" alt="" />
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="#000"
          active-text-color="#409EFF"
          router
        >
          <template v-for="item in navMenuData">
            <el-menu-item :index="item.categoryId" v-if="!item.children">{{
              item.categoryName
            }}</el-menu-item>
            <el-submenu :index="item.categoryId" v-if="item.children">
              <template slot="title">{{ item.categoryName }}</template>
              <template v-for="item2 in item.children">
                <el-menu-item
                  :index="item2.categoryId"
                  v-if="!item2.children">
                  {{ item2.categoryName }}
                </el-menu-item>
                <el-submenu :index="item2.categoryId" v-if="item2.children">
                  <template slot="title">{{ item2.categoryName }}</template>
                  <template v-for="item3 in item2.children">
                    <el-submenu :index="item3.categoryId" v-if="item3.children">
                      <template slot="title">{{ item3.categoryName }}</template>
                      <template v-for="item4 in item3.children">
                        <el-menu-item :index="item4.categoryId">
                          {{item4.categoryName}}
                        </el-menu-item>
                      </template>
                    </el-submenu>
                  </template>
                </el-submenu>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="right">
        <div>
          <el-popover placement="bottom" width="100" trigger="hover">
            <router-link class="mine" to="/mine">个人中心</router-link>
            <div class="mine" @click="getOut">退出</div>
            <el-avatar :src="url" slot="reference"></el-avatar>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { removeToken, getToken } from "@/utils/token.js";
import{ getUserinfro } from './../api/user'
import { getCategories } from "@/api/model";
export default {
  data() {
    return {
      // activeIndex:'/',
      isShow: true,
      navMenuData: [
        { categoryId: "/index", categoryName: "首页" },
        {
          categoryId: "device",
          categoryName: "器件选型",
          children: [
          //   // {
          //   //   categoryId: "C4509085",
          //   //   categoryName: "方案咨询1",
          //   //   children: [
          //   //     { categoryId: "C45020851", categoryName: "方案咨询4" },
          //   //     { categoryId: "C25020853", categoryName: "方案咨询5" },
          //   //     { categoryId: "C45820855", categoryName: "方案咨询6" },
          //   //   ],
          //   // },
          //   // { categoryId: "C4509086", categoryName: "方案咨询2" },
          //   // { categoryId: "C4509087", categoryName: "方案咨询2" },
          ],
        },
        { categoryId: "/home/service", categoryName: "方案咨询" },
        { categoryId: "/home/guide", categoryName: "避坑指南" },
        { categoryId: "/home/video", categoryName: "视频" },
        { categoryId: "/home/SMT", categoryName: "SMT制造" },
        { categoryId: "/home/PCB", categoryName: "PCB制造" },
      ],
      url: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      selectModle: [],
    };
  },
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 退出
    getOut(){
      console.log( removeToken(),'2222222');
      removeToken();
      this.$router.push('/');
    },
  },
  created() {
    getCategories().then((res) => {
      if (res.code == 200) {
        this.selectModle = res.result;
        console.log(this.selectModle,'器件');
        this.selectModle.find((item) => {
          item.categoryId = '/device/' + item.id;
          item.categoryName = item.name;
          if(item.children != null){
            item.children.find(val=>{
              val.categoryId = '/device/' + val.id;
              val.categoryName = val.name;
              if(val.children != null){
                val.children.find(price=>{
                  price.categoryId = '/device/' + price.id;
                  price.categoryName = price.name;
                })
              }
            })
          }
        });
        this.navMenuData[1].children = this.selectModle;
      }
    });
    getUserinfro().then(res=>{
      if(res.code == 200){
        this.url = res.result.avatar;
      }
    })
    if (getToken()) {
      this.isShow = false;
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.fullPath) this.activeIndex = to.path; // 给defaultActive重新赋值为当前组件的路由地址
      },
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "./../assets/style/edit.css";
.home {
  width: 100%;
}
.header {
  width: 100%;
  height: 64px;
  padding: 0 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 4px #ccc;
  .el-menu-item{
    font-size: 14px;
  }
}
.left {
  width: 90%;
  display: flex;
  align-items: center;
}
.logo {
  // width: 200px;
  height: 38px;
  margin-right: 2%;
}
.mine {
  display: block;
  color: #000;
  text-align: center;
  font-size: 16px;
  margin: 10px 0;
  cursor: pointer;
}
.mine:hover {
  color: #1e80ff;
}
</style>